<template>
	<view>
		<!-- 轮播 -->
		<view class="lb-banner">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" :circular="true"
				height="750rpx" radius="0rpx" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>

		<!-- 基本信息 -->
		<view class="lb-info">
			<view class="info-top">
				<view class="top-left">
					<text>{{rowData.name || ''}}</text>
					<!-- <text>任洗3件</text> -->
				</view>
				<view class="top-right">
					销量{{rowData.sell_num || 0}}
				</view>
			</view>
			<view class="info-centre">
				<view class="price">
					<text>{{rowData.a_price?'活动价':''}} </text>
					<text>¥</text>
					<text>{{rowData.a_price || rowData.price || ''}}</text>
				</view>
				<view class="vip-price" v-if="rowData.v_price && rowData.v_price > 0">
					<image src="/static/icon/vip-zx.png" mode=""></image>
					<text>￥{{rowData.v_price || ''}}</text>
				</view>
			</view>
			<view class="info-foot" v-if="rowData.a_price">
				原价￥{{rowData.price || ''}}
			</view>
		</view>

		<!-- 富文本 -->
		<view class="lb-content">
			<u-parse :content="rowData.content" :tagStyle="tagStyle"></u-parse>
		</view>
		<!-- 间隔 -->
		<view style="height: 200rpx; width: 100%;">

		</view>

		<!-- 底部 -->
		<view class="lb-foot">
			<view class="foot-left">
				<view class="left-item" @click="goTo('/pages/home/home')">
					<view class="f-icon">
						<image src="/static/icon/home.png" mode=""></image>
					</view>
					<view class="f-label">
						首页
					</view>
				</view>


				<view class="left-item">
					<button open-type="share">
						<view class="f-icon">
							<image src="/static/icon/share.png" mode=""></image>
						</view>
						<view class="f-label">
							分享
						</view>
					</button>
				</view>


			</view>

			<view class="foot-right">
				<view class="f-price">
					<text v-if="user_info.is_vip">{{rowData.v_price}}</text>
					<text v-else>{{rowData.a_price || rowData.price || ''}}</text>
				</view>
				<view class="f-btn" @click="clickBuy()">
					立即购买
				</view>
			</view>
		</view>
		<loginPop></loginPop>
	</view>
</template>

<script>
	import {
		beautifyDetail,
	} from '@/api/apis/comm.js'
	import {
		beautifyAddOrder,
	} from '@/api/apis/wash.js'
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				id: 0,
				currentNum: 0,
				list6: [],
				rowData: {},
				tagStyle: {
					p: 'font-size:24rpx;line-height: 46rpx;color: #999999;',
					span: 'font-size: 20rpx;line-height: 40rpx;color: #999999;',
					img: 'widht:100%'
				},
				content: ``,
			}
		},
		//分享
		//onShareAppMessage 分享给朋友
		//onShareTimeline  分享到朋友圈
		// #ifdef MP
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			let that = this;
			let gName = this.rowData.name;
			let img = setImgUrl(this.rowData.cover_image);
			let uid = that.user_info.id;
			return {
				title: gName,
				imageUrl: img,
				path: '/pages/mei-rong/goods-detail/goods-detail?uid=' + uid + '&id=' + that.id + '&share_type=1',
			}
		},
		onShareTimeline: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			let that = this;
			let gName = this.rowData.name;
			let img = setImgUrl(this.cover_image);
			let uid = that.user_info.id;
			return {
				title: gName,
				imageUrl: img,
				path: '/pages/mei-rong/goods-detail/goods-detail?uid=' + uid + '&id=' + that.id + '&share_type=1',
			}
		},
		// #endif
		methods: {
			//购买
			clickBuy() {
				let _this = this;
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				beautifyAddOrder({
					goods_id: this.rowData.id,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/mei-rong/order-payment/order-payment?id=' + res.data
								.order_id
						})
					}

				})
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				beautifyDetail({
					id: this.id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.list6 = [];
						let imgArr = res.data.goods_images.split(',');
						imgArr.forEach((val, key) => {
							this.list6.push(setImgUrl(val));
						})
						this.rowData = res.data;
					}
				})
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id;
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
	}

	button:hover {
		background: none;
	}

	.lb-banner {
		width: 100%;
		height: 750rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(23, 23, 23, 0.1);
		width: 70rpx;
		height: 40rpx;
		border-radius: 24rpx;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;

		&__text {
			color: #333333;
			font-size: 12px;
		}
	}

	//基本信息
	.lb-info {
		width: 100%;
		height: 196rpx;
		background-color: $main-bg-color;
		padding: 32rpx;
		box-sizing: border-box;



		.info-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.top-left {
				text {
					font-size: $main-font-28;
					font-weight: bold;
					color: $main-font-color;

					&:nth-of-type(2) {
						font-size: $main-font-24;
						font-weight: 400;
						color: $main-font-color-grey6;
						padding: 12rpx;
					}
				}
			}

			.top-right {
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color-grey6;
			}
		}



		.info-centre {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 12rpx 0;

			.price {
				// display: flex;
				// flex-direction: row;
				// align-items: flex-end;

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #666666;

					&:nth-of-type(2) {
						font-size: $main-font-20;
						color: #00D26E;
						padding: 0 6rpx 0 12rpx;

					}

					&:nth-of-type(3) {
						font-size: $main-font-36;
						color: #00D26E;
					}
				}
			}

			.vip-price {
				display: flex;
				flex-direction: row;
				padding-left: 12px;

				image {
					width: 92rpx;
					height: 36rpx;
				}

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #7C562D;
					padding-left: 6rpx;
				}
			}
		}



		.info-foot {
			font-size: $main-font-20;
			font-weight: 400;
			color: $main-font-color-grey9;
			text-decoration: line-through;
		}

	}

	//富文本
	.lb-content {
		margin-top: 24rpx;
		background-color: $main-bg-color;
		padding: 24rpx;
		box-sizing: border-box;
	}

	//底部
	.lb-foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 30rpx 0;
		box-sizing: border-box;

		.foot-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: space-around;
			height: 134rpx;
			padding-left: 40rpx;

			.left-item {
				display: flex;
				flex-direction: column;

				&:nth-of-type(2) {
					padding-left: 72rpx;
				}



				.f-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.f-label {
					padding-top: 8rpx;
					font-size: $main-font-20;
					font-weight: 400;
					color: #171717;
				}
			}
		}


		.foot-right {
			flex: 1;
			height: 134rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;


			.f-price {
				padding-right: 12rpx;

				text {
					font-size: $main-font-36;
					font-weight: bold;
					color: #F65D40;
					opacity: 1;

					&:before {
						content: '¥ ';
						font-size: $main-font-20;
						font-weight: 400;
					}
				}
			}

			.f-btn {
				width: 180rpx;
				height: 80rpx;
				border-radius: 44rpx;
				background: linear-gradient(133deg, #F7583F 0%, #F28F4C 100%);
				line-height: 78rpx;
				text-align: center;
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color-white;
			}
		}
	}
</style>